---
description: Learn how to use Alias source code imports with your browser extension.
---

# Alias Source Code Import

There are two methods to override the import path:

- Using the `paths` property in `tsconfig.json`
- Using the `alias` property in `package.json`

## Alias Local TypeScript Imports

To alias local imports, use the `paths` mapping in `tsconfig.json`:

```json
{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": ["./**/*.ts", "./**/*.tsx"],
  "compilerOptions": {
    "paths": {
      "~*": ["./src/*"],
      "@Components/*": ["./src/components/*"]
    },
    "baseUrl": "."
  }
}
```

You can then use it as follow:

```tsx
import { Button } from "@Components/button"
import { Checkbox } from "@Components/checkbox"
import { Header } from "@Components/header"
import { Input } from "@Components/input"
```

See the example in [bug-244-alias-local-imports](https://github.com/PlasmoHQ/plasmo-test/tree/main/bug/bug-244-alias-local-imports)

## Alias External TypeScript Modules

To alias external typescript modules, you may use the `paths` mapping pointing to an external directory in `tsconfig.json`:

```json
{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": ["./**/*.ts", "./**/*.tsx"],
  "compilerOptions": {
    "paths": {
      "coolio/*": ["../../../some-cool-package/*"]
    },
    "baseUrl": "."
  }
}
```

The import becomes:

```tsx
import { hello } from "coolio/hello"
```

## Alias External Imports

You can use the `alias` field to map an import path to a file external to your project:

```json
{
  "alias": {
    "some-cool-identifier/hello": "../../../cool-file.js"
  }
}
```

Make sure to also declare that import in a typescript declaration `cool-file.d.ts` file:

```ts
declare module "some-cool-identifier/hello" {
  export const hello: string
}
```

And include that file in your `tsconfig.json`:

```json
{
  ...
  "include": ["./**/*.ts", "./**/*.tsx", "./cool-file.d.ts"]
}
```

Then you can use it in your code:

```tsx
import { hello } from "some-cool-identifier/hello"
```

## Alias API-Compatible Modules

Use the `alias` field in `package.json` to alias API-compatible modules. You can map to a local file or a dependency package.

### Using Preact instead of React

Since Preact's API is compatible with React, you can alias it like so:

```json
{
  "alias": {
    "react": "preact/compat",
    "react-dom": "preact/compat"
  }
}
```
